<template>
  <div class="pagss">
    <Navvz></Navvz>

    <el-row :gutter="20" style="margin-right: 5px;">
      <el-col :span="3">
        <!-- 侧边导航++++++++++++++++++++++ -->
        <Sidebartss defaultActive='2-1'></Sidebartss>
        <!-- 侧边导航=============== -->
      </el-col>


      <el-col :span="21">
        <el-row>
          <el-col :span="24">
            <div class="panel-group1">
              <div class="space-between">

                <div class="row">
                  <div class="lssx mr_8"></div>
                  <div class="f_16 f_bold">数据概况</div>
                </div>

                <div class="row">

                  <div class="search mr_8">
                    <el-select v-model="game_value" clearable placeholder="全部游戏" style="width: 120px;">
                      <el-option v-for="item in game_options" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </div>

                  <div class="search mr_8" style="color: red;">
                    <el-select v-model="channel_value" clearable placeholder="请选择游戏渠道" style="width: 160px;">
                      <el-option v-for="item in channel_options" :key="item.value" :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>

                  <div class="search mr_8">
                    <el-date-picker style="width: 230px;" v-model="time_value" type="daterange" range-separator="~"
                      start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                  </div>
                  <el-button @click="gotoPage('/center/overview')" type="primary" icon="el-icon-search">搜索</el-button>
                </div>

              </div>

              <div class="f_14  space-between mt_24" style="margin-right: 110px;">
                <div class="center itmebox">当前在线人数</div>
                <div class="center itmebox">活跃用户</div>
                <div class="center itmebox">激活用户</div>
                <div class="center itmebox">总付费金额</div>
                <div class="center itmebox">总付费数</div>
                <div class="center itmebox">总付费数</div>
              </div>

              <div class="f_14  space-between mt_20" style="margin-right: 110px;">
                <div class=" f_36 center itmebox">87</div>

                <div class="center itmebox">
                  <div class="f_36 mr_5">139</div>
                  <img style="height: 19px;width: 9px;" src="@/assets/images/hjt.jpg" />
                </div>

                <div class="center itmebox">
                  <div class="f_36 mr_5">103</div>
                  <img style="height: 19px;width: 9px;" src="@/assets/images/hjt.jpg" />
                </div>

                <div class="center itmebox">
                  <div class="f_36 mr_5">10148.8</div>
                  <img style="height: 19px;width: 9px;" src="@/assets/images/hjt.jpg" />
                </div>

                <div class="center itmebox">
                  <div class="f_36 mr_5">7</div>
                  <img style="height: 19px;width: 9px;" src="@/assets/images/ljt.jpg" />
                </div>

                <div class="center itmebox">
                  <div class="f_36 mr_5">0</div>
                  <img style="height: 19px;width: 9px;" src="@/assets/images/hjt.jpg" />
                </div>
              </div>

              <div class="f_14  space-between mt_24" style="margin-right: 110px;">
                <div class="center itmebox">今日最高<span class="color_F04940 ml_5">280</span></div>
                <div class="center itmebox">昨日总活跃<span class="color_F04940 ml_5">280</span></div>
                <div class="center itmebox">昨日激活用户<span class="color_F04940 ml_5">280</span>人</div>
                <div class="center itmebox">昨日付费总额<span class="color_F04940 ml_5">280</span>元</div>
                <div class="center itmebox">昨日付费数<span class="color_F04940 ml_5">280</span></div>
                <div class="center itmebox">昨日新用户付费<span class="color_F04940 ml_5">280</span>人</div>
              </div>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <div class="panel-group2 ">

              <div class="row_a_c  ml_20" style="padding-top: 20px;">
                <div class="shushu mr_16"></div>
                <div class="f_16 f_bold">在线用户趋势</div>
              </div>

              <div class="row center">
                <div class="wzsp center f_14">在线用户数(人)</div>
                <bar-chatr></bar-chatr>
              </div>

            </div>
          </el-col>
          <el-col :span="12">
            <div class="panel-group2 ">

              <div class="row_a_c  ml_20" style="padding-top: 20px;">
                <div class="shushu mr_16"></div>
                <div class="f_16 f_bold">付费额趋势</div>
              </div>

              <div class="row center">
                <div class="wzsp center f_14">冲值金额(元)</div>
                <bar-chatr></bar-chatr>
              </div>

            </div>
          </el-col>
        </el-row>


      </el-col>
    </el-row>




  </div>
</template>

<script>
  import * as Merchant from "@/api/system/user";

  import CountTo from 'vue-count-to'
  import Cookies from 'js-cookie'
  import Vue from 'vue';
  import BarChatr from "@/views/dashboard/BarChart.vue"
  import LineChart from "@/views/dashboard/LineChart.vue"
  import PanelGroup from "@/views/dashboard/PanelGroup.vue"
  import PieChart from "@/views/dashboard/PieChart.vue"
  import RaddarChart from "@/views/dashboard/RaddarChart.vue"
  import Navvz from "@/components/Navvz";
  import Sidebartss from "@/components/Sidebartss";

  export default {
    name: 'Index',
    components: {
      CountTo,
      BarChatr,
      LineChart,
      PanelGroup,
      PieChart,
      RaddarChart,
      Navvz,
      Sidebartss
    },
    data() {
      return {
        time_value: '',
        game_options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, ],

        channel_options: [{
          value: '选项',
          label: '渠道1'
        }, {
          value: '选项2',
          label: '渠道2'
        }, ],
        game_value: '',
        channel_value: '',
        loading: false,
        GameList: [], //游戏列表
        total: 0,
        business_service: {
          title: "",
          mobile: "",
          qq: ""
        }, //商务信息
        statistics: {},
        // 查询参数
        queryParams: {
          page: 1,
          pageSize: 10,
          state: 1
        },
        merchant: {
          balance: {},
          info: {}
        },
        driver: null,
        isPlay: false,

      }
    },
    created() {
      this.initChart();
      this.getVoice();
    },
    mounted() {

    },
    methods: {

      gotoPage(url) {
        this.$router.push(url);
      },
      //统计信息
      getStatistics() {

      },
      //统计
      getVoice() {
        let that = this;
        let timer = setInterval(() => {

        }, 5000)
      },
      handleSetLineChartData(type) {
        return false;
        switch (type) {
          case "today_register": //今日注册
            this.$router.push('monitor/game');
            break;
          case "today_pay": //今日充值
            this.$router.push('monitor/game');
            break;
          case "today_recharges": //今日订单
            this.$router.push('monitor/game');
            break;
          case "today_unit_price": //今日客单价

            break;
          case "yesterday_register": //昨日注册
            this.$router.push('monitor/game');
            break;
          case "yesterday_pay": //昨日充值
            this.$router.push('monitor/game');
            break;
          case "yesterday_recharges": //昨日订单
            this.$router.push('monitor/game');
            break;
          case "yesterday_unit_price": //昨日客单价

            break;
          default: //默认
            break;
        }
      },
      initChart() {
        let that = this;
      },
      gotoPage(url) {
        this.$router.push(url);
      }
    }
  }
</script>

<style lang="scss" scoped>

  .pagss {
    height: 100%;
    background: #E4EEF9;
    // padding: 5px 0 15px 40px;
  }

  .wzsp {
    // margin-top: 100px;
    padding-left: 50px;
    writing-mode: vertical-rl;
  }

  .shushu {
    width: 8px;
    height: 20px;
    background: #306EF2;
  }

  .panel-group1 {
    padding: 20px;
    margin-top: 18px;
    margin-bottom: 32px;
    height: 250px;
    background: #FFFFFF;
    box-shadow: 1px 5px 9px 1px rgba(180, 185, 242, 0.68);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  .panel-group2 {
    height: 355px;
    background: #FFFFFF;
    box-shadow: 1px 5px 9px 1px rgba(180, 185, 242, 0.68);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  .lssx {
    width: 4px;
    height: 24px;
    background: #1A82FB;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
  }

  ::v-deep .el-input--medium .el-input__inner {
    background: #F0F3F8;
    border: 1px solid #F0F3F8;

  }

  ::v-deep .el-select .el-input .el-select__caret {
    color: #000000 !important;
  }

  ::v-deep .el-range-editor.el-input__inner {
    background: #F0F3F8;
  }

  ::v-deep .el-range-editor--medium .el-range-input {
    font-size: 14px;
    background: #F0F3F8;
    color: #000000;
  }

  ::v-deep .el-input__inner {
    border: 1px solid #F0F3F8;

  }

  ::v-deep .el-date-editor .el-range__icon {
    color: #000000;
  }


  ::v-deep .el-menu-item * {
    font-size: 18px;
    // margin-top: 20px;

  }


  .item_nav {
    margin-bottom: 20px !important;
  }

  ::v-deep .el-tabs__item {
    font-size: 18px;
    color: black;
    font-weight: bold;
  }

  ::v-deep .el-tabs__item.is-active {
    color: #409EFF;
  }






  .search {

    ::v-deep .el-input__inner,
    ::v-deep .el-date-editor .el-range-input {
      &::placeholder {
        color: #000000;
      }

      &::-webkit-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: #000000;
      }

      &:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 适配火狐 */
        color: #000000;
      }

      &::-moz-placeholder {
        /* Mozilla Firefox 19+ 适配火狐 */
        color: #000000;
      }

      &:-ms-input-placeholder {
        /* Internet Explorer 10+  适配ie*/
        color: #000000;
      }
    }
  }

  .itmebox {
    width: 150px;
  }

  .hjt {
    width: 9px;
    height: 19px;
    background: #D40000;
    opacity: 1;
  }



  .el-submenu__title * {
    font-size: 18px;

  }

  .el-submenu .el-menu-item {
    // margin-left: 20px;
    padding-left: 60px !important;
  }
</style>

<style>
  .search {
    .el-input__inner::placeholder {
      color: #000000;
    }

    /* 谷歌 */
    .el-input__inner::-webkit-input-placeholder {
      color: #000000;
    }

    /* 火狐 */
    .el-input__inner:-moz-placeholder {
      color: #000000;
    }

    /*ie*/
    .el-input__inner:-ms-input-placeholder {
      color: #000000;
    }
  }
</style>
